<template>
  <div>
    <search-table
      :headParams="headParams"
      :defaultParams="defaultParams"
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="商品名称">
            <a-input
              style="width: 180px"
              v-decorator="['goodsName']"
              placeholder="请输入商品名称"
            >
            </a-input>
            <a-input type="hidden" v-decorator="['activityId']"></a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
              style="width: 180px"
              v-decorator="['goodsStatus']"
              :allowClear="true"
              placeholder="请选择"
              :options="allStatus"
            ></a-select>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission>
          <a-button type="primary" icon="plus" @click="chooseGoods()"
            >选择商品</a-button
          >
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <permission>
            <a
              href="javascript:;"
              class="text-primary"
              @click="handleEditCommodity(record, 'view')"
              >查看详情</a
            >
          </permission>
          <permission v-if="activityStatu != 3">
            <a
              href="javascript:;"
              class="text-primary"
              @click="handleEditCommodity(record, 'edit')"
              >编辑商品</a
            >
          </permission>
          <permission v-if="activityStatu != 3">
            <a
              href="javascript:;"
              class="text-danger"
              @click="deleteRows(record.goodId)"
              >删除</a
            >
          </permission>
        </a-space>
      </template>
    </search-table>
    <div class="row flex flex_end">
      <a-button @click="handleBack">返回</a-button>
    </div>
    <ChooseGoods
      :visible="chooseGoodsVisible"
      :defaultParams="defaultParams"
      @cancel="chooseGoodsVisible = false"
      @submit="handleChooseGoodsSubmit"
    ></ChooseGoods>
  </div>
</template>

<script>
import ChooseGoods from "./../components/ChooseGoods";

export default {
  components: {
    ChooseGoods,
  },
  computed: {
    activityId() {
      return this.$route.query.activityId || "";
    },
    enableMspage() {
      return this.$route.query.enableMspage || "";
    },
    activityStatu() {
      return this.$route.query.activityStatu || "";
    },
  },
  data() {
    return {
      headParams: { baseURL: `${location.origin}/goldenhome/seckill/admin` },
      defaultParams: { activityId: this.$route.query.activityId || "" },
      url: "/seckill/goods/page",
      form: this.$form.createForm(this, { name: "table_search" }),
      columns: [
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
        },
        {
          title: "现有库存",
          dataIndex: "goodsInventoryTotal",
          key: "goodsInventoryTotal",
        },
        {
          title: "秒杀剩余库存",
          dataIndex: "totalRemainStock",
          key: "totalRemainStock",
        },
        {
          title: "秒杀总库存",
          dataIndex: "totalSeckillStock",
          key: "totalSeckillStock",
        },
        {
          title: "商品状态",
          dataIndex: "goodsStatus",
          key: "goodsStatus",
          customRender: (text) => {
            let res = "";
            if (text == 1) {
              res = "仓库中";
            } else if (text == 2) {
              res = "已上架";
            } else if (text == 3) {
              res = "已下架";
            }
            return res;
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      allStatus: [
        {
          value: "",
          label: "全部状态",
        },
        {
          value: 1,
          label: "仓库中",
        },
        {
          value: 2,
          label: "已上架",
        },
        {
          value: 3,
          label: "已下架",
        },
      ],
      chooseGoodsVisible: false,
      currentData: {},
    };
  },
  methods: {
    handleBack() {
      this.$router.push({
        name: "MarketingSeckill",
        query: {
          back: !this.isReload,
        },
      });
    },
    handleCancel() {
      this.newActivityVisible = false;
      this.currentData = {};
    },
    //选择商品
    handleChooseGoodsSubmit(id) {
      this.newActivityVisible = false;
      this.$router.push({
        name: "MarketingSeckillPagesAddEditCommodity",
        query: {
          handle: "add",
          activityId: this.activityId,
          enableMspage: this.enableMspage,
          productId: id,
        },
      });
    },
    //编辑商品
    handleEditCommodity(record, type) {
      this.$router.push({
        name: "MarketingSeckillPagesAddEditCommodity",
        query: {
          handle: type,
          activityId: this.activityId,
          enableMspage: this.enableMspage,
          productId: record.goodId,
        },
      });
    },
    chooseGoods() {
      this.chooseGoodsVisible = true;
    },
    deleteRows(ids) {
      let _this = this;
      this.$confirm({
        title: "删除提示",
        content:
          "确定删除次商品，删除后将不可恢复，若已开启活动则该商品将被强制下架",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          _this
            .$post(
              "/seckill/goods/delete",
              [{ activityId: _this.activityId, goodsId: ids }],
              { baseURL: `${location.origin}/goldenhome/seckill/admin` }
            )
            .then((res) => {
              if (res && res.returnCode == 1000) {
                _this.$refs.searchtable.refreshTable();
              }
            });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.disabled {
  pointer-events: none;
  color: #ccc;
}
.row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex_end {
  justify-content: flex-end;
}
</style>